<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            height: 3000px;
        }

        .fdj {
            width: 1200px;
            background-color: #ddd;
            margin: 20px auto;
            display: flex;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 10px solid #000;

            /* border-width: 10px;
            border-color: #000;
            border-style: solid; */

            position: relative;
            
        }
        .box img {
            width: 300px;
            height: 300px;
        }
        .cover {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,.5);
            /* position: absolute; */
            cursor: move;

            /* visibility:hidden / visible */
            visibility: hidden;

            /* display: none; */   

            position: absolute; 

        }
        .right {
            margin-left: 50px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        .right img {
            width: 1500px;
            height: 1500px;
            visibility: hidden;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class="fdj">
        <div class="box">
            <div class="cover"></div>
            <img src="../images/6.jpg" alt="">
        </div>
        <div class="right">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>


 

    <script>

        // 使用了display none  之后，获取不到元素的相关样式
        // 建议使用visibility:hidden


        // 鼠标移动事件绑定给box   而不是cover    防止跑丢 

        // cssText   +=   覆盖


        // 放大镜的css部分
        //    右边大盒子   大盒子里面有更大的图片
        //    左边图片与遮罩层的比例  =  右边大图和右边盒子的比例
        


        // 左边遮罩层向右移动的时候，大图向左移动
        //   大图和遮罩层的移动比例 = 大图的移动范围 / 小图的移动范围


        var oBox = document.querySelector('.box') ;
        var oCover = document.querySelector('.cover') ;

        // 宽度的一半
        var r = oCover.offsetWidth / 2 ;
        var _left = oBox.offsetLeft ;
        var _top = oBox.offsetTop ;
        var border = getCss(oBox , 'borderWidth') ;   
        var maxWidth = oBox.clientWidth - oCover.offsetWidth ;
        var maxHeight = oBox.clientHeight - oCover.offsetHeight;
        
        var oBigImg = document.querySelector('.right img') ;
        var oRight = document.querySelector('.right') ;

        // 大图的移动比例
        // var scale = 大图的移动范围 / 小图的移动范围
        var maxBigWidth = oBigImg.offsetWidth - oRight.offsetWidth ;

        var scale = maxBigWidth / maxWidth ;

        // 鼠标移入移出
        oBox.onmouseover = function() {
            // 显示这个cover
            oCover.style.visibility = 'visible' ;
            oBigImg.style.visibility = 'visible' ;
        }

        oBox.onmouseout = function() {
            // 显示这个cover
            oCover.style.visibility = 'hidden' ;
            oBigImg.style.visibility = 'hidden' ;
        }



        // 鼠标跟随   鼠标移动事件

        // 事件绑定给谁？？？   如果是cover   就会跑丢了
        // 事件需要绑定给oBox


        oBox.onmousemove = function(e) {
            var e = e || event ;
            var x = e.pageX - r - _left - border ;
            var y = e.pageY - r - _top - border ;
            // 判断
            if(x < 0) x = 0 ;
            if(y < 0) y = 0 ;
            if(x > maxWidth) x = maxWidth ;
            if(y > maxHeight) y = maxHeight ;
            oCover.style.cssText += `left:${x}px;top:${y}px` ;
            // 大图反向移动
            oBigImg.style.cssText += `left:${-x * scale}px;top:${-y * scale}px` ;
        }




        function getCss(obj , prop) {
            if(window.getComputedStyle) {
                return parseInt(getComputedStyle(obj)[prop]) ;
            }
            return parseInt(obj.currentStyle[prop])
        }

    </script>
</body>
</html>